<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>焦点图</title>
     <style type="text/css">
            *{ margin: 0;padding: 0;border: 0;list-style: none;}
         .all{ width: 650px;  height: 250px;  margin:100px auto;  position: relative;  }
         .all ul{ position: relative; z-index: 1;}
         .all ul li{ width: 650px;  height: 250px;  position: absolute;  left: 0;  top:0;  }
         .all ol{ position: absolute;right: 10px;bottom: 10px;z-index: 2;  }
         .all ol li{  float: left; width: 20px; height: 20px; background: #000; border: 1px solid #ccc; color:#ccc; text-align: center; line-height: 20px; margin-left: 10px; cursor: pointer;  }
         .all li.cur{ width: 30px;height: 30px; color:#f60; border-color: #f60; line-height: 30px; font-size: 20px; margin-top:-10px; }
     </style>
    <script src="jquery-1.7.2.min.js"></script>
    <script>
        $(function () {
            var num = 100;
            $(".all ol li").mouseover(function(){
                num++;
                var index = $(this).index();
                $(this).addClass("cur").siblings().removeClass("cur");
                $('.all ul li').eq(index).css('z-index',num).hide().stop().fadeIn()
            })
        });
    </script>
</head>
<body>
<div class="all">
    <ul>
        <li><img src="images/img/01.jpg" alt="" width="650" height="250"></li>
        <li><img src="images/img/02.jpg" alt="" width="650" height="250"></li>
        <li><img src="images/img/03.jpg" alt="" width="650" height="250"></li>
        <li><img src="images/img/04.jpg" alt="" width="650" height="250"></li>
        <li><img src="images/img/05.jpg" alt="" width="650" height="250"></li>
    </ul>
    <ol>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li class="cur">5</li>
    </ol>
</div>
</body>
</html>